<template>
  <div class="monitor-table">

    <el-table 
      :data='tableData'
      :key='keyCount'
      @row-click="clickRow"
    >

      <el-table-column 
       v-for='(k,i) in tableCol'
       :key='i'
        align="center"
       :label="k.label" 
       :width="k.width" 
       :min-width="k.minWidth" 
       :prop='k.prop'>
      </el-table-column>


      <el-table-column
        align="center"
        label="薪资组个数" 
        width='120'
        >
        <template scope="scope">
          <div class='div' :class='setClass(scope.row.percentage)'>{{scope.row.totalNum}}</div>  
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="及时完成数" 
        width='120'
        >
        <template scope="scope">
          <div class="div" :class='setClass(scope.row.percentage)' @click.stop='showDialog(scope.row)'>{{scope.row.completeNum}}</div>  
        </template>
      </el-table-column>


      <el-table-column
        align="center"
        label="实际完成数" 
        width='120'
        >
        <template scope="scope">
          <div class='div' :class='setClass(scope.row.percentage)'>{{scope.row.realNum || 0}}</div>  
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="完成率" 
        width='120'
        >
        <template scope="scope">
          <div class='div' :class='setClass(scope.row.percentage)'>{{scope.row.percentage}}</div>  
        </template>
      </el-table-column>



    </el-table>

    <v-dialog :dialogVisible.sync='dialogVisible' :dialogParams='dialogParams'></v-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { DatePicker, Table, TableColumn } from 'element-ui'
import VDialog from '@/components/router-component/monitor/salaryMonitor/dialog'
Vue.use(DatePicker)
Vue.use(Table)
Vue.use(TableColumn)
export default {
	components: {
		VDialog
	},
	data () {
		return {
			tableData: [],
			tableCol: [{
				label: '业务单位',
				prop: 'setid',
				width: 110
			}, {
				label: '单位名称',
				prop: 'descrshort',
				minWidth: 300
			}],
			dialogVisible: false,
			dialogParams: {},
			keyCount: 2313
		}
	},
	props: {
		table: {
			type: Array,
			default: []
		},
	},
	watch: {
		table: {
			handler (newValue) {
				this.keyCount++
				newValue && (this.tableData = newValue)
			},
			deep: true
		}
	},
	methods: {
		showDialog (row) {
			const { setid, yf } = row, color = this.setClass(row.percentage)
			this.dialogParams = {
				setid,
				color,
				yf
			}
			this.dialogVisible = true
		},


		setClass (val) {
			if (parseInt(val) == 0) return 'red'
			if (parseInt(val) < 50) return 'yellow'
			if (parseInt(val) >= 0) { return 'green' } else { return }
		},

		clickRow (row) {
			this.showDialog(row)
		},
	}
}
</script>

<style lang='less' scoped>
.monitor-table {
  padding: 20px 0;

  .div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;
  }
  
  .div,
  td {
    transition: background-color 0.25s ease;
  }

  .red {
    background-color: #fef0f0;
  }

  .yellow {
    background-color: rgba(255, 244, 94,.5);
  }

  .green {
    background-color: rgb(224, 246, 213);
  }
}
</style>

<style lang='less'>
.monitor-table {
  .el-table--enable-row-hover tr:hover {
    & > td,
    .div {
      background-color:#EDF5FF !important;
    }
  }

  //  .el-table--enable-row-hover tr:hover .cell {
  //   background-color: #fff !important;
  // }

  .el-table .cell,
  .el-table th > div {
    padding-left: 0;
    padding-right: 0;
  }
  .el-table__body-wrapper .el-table__row {
    cursor: pointer;
  }
}
</style>
